<template>
  <div>
     <header>
        <a href="/#/index" class="h_left">
          <span class="iconfont icon-iconfont6"></span>
        </a>
        <p>注册新用户</p>
        <a href="javascript:;" class="h_right" @click="navshow()">
          <span class="iconfont iconfont-sortall icon-iconfontsortall"></span>
        </a>
     </header>
     <div class="content">
         <div class="nav" v-show="isTrue">
         <ul class="f_ul">
           <li>
             <router-link to="/index"> 
               <img src="../../images/liushuxue/home_icon_new.png" alt="">
               <p>首页</p>
             </router-link>
           </li>
           <li>
             <router-link to="#">
               <img class="aaa" src="../../images/liushuxue/classify_icon_new.png" alt="">
               <p>分类</p>
             </router-link>
           </li>
           <li class="numfather">
             <router-link to="#">
               <img src="../../images/liushuxue/cart_icon_new.png" alt="">
               <span class="num">2</span>
               <p>购物车</p>
             </router-link>
           </li>
           <li>
             <router-link to="#">
               <img src="../../images/liushuxue/my_icon_new.png" alt="">
               <p>我的</p>
             </router-link>
           </li>
         </ul>
     </div>
      <div class="phone_register">
        <a href="javascript:;" @click="flag=1" :class="flag==1?'active':''">
         <span >手机注册</span>
       </a>
       <a href="javascript:;" @click="flag=2" :class="flag==2?'active':''">
       <span>邮箱注册</span>
       </a>
     </div>
     <form>
        <div class="one" v-show="flag==1">
         <input class="txtphone" type="text" placeholder="请输入手机号"> 
         <div class="txtmessage_fa">
            <input class="txtmessage" type="text" placeholder="请输入验证码">
            <span>
              <img src="../../images/liushuxue/GetImgVerificationCode.jpg">
            </span>
         </div> 
         <div class="message">
         <input type="text" placeholder="请输入短信验证码">
          <a href="javascript:;">
            <span>获取短信验证码</span>
          </a>
          </div>
        </div>
         <div class="two" v-show="flag==2">
          <div class="txtmessage_fa">
            <input class="txtmessage" type="text" placeholder="请输入验证码">
            <span>
              <img src="../../images/liushuxue/GetImgVerificationCode.jpg">
            </span>
          </div> 
           <input class="txtemail" type="text" placeholder="请输入邮箱"> 
           <input class="txtpwd1" type="text" placeholder="请设置6-20位字母和数字登陆密码"> 
        </div>
        <input class="btn" type="button" value="下一步">
      </form>
      <div class="findpwd">
        <a href="javascript:;" class="pwd">
            找回密码
        </a>
      </div>
    </div>
  </div>
</template>

<script>
 import './Iconfont/iconfont.css';
 export default {
  data() {
    return {
       isTrue: false,
       flag: 1,
    };
  },
  methods: {
     navshow() {
      this.isTrue = !this.isTrue;
    }
  },
 }; 
</script>
<style lang="css" scoped>
p {
    margin: 0;
    padding: 0;
}
header {
    height: 44px;
    background-color: #fafafa;
    border-bottom: 1px solid #e4e4e4;
}
.h_left {
    position: absolute;
    top: 12px;
    left: 18px;
    color: #595959;
}
header p {
    width: 100%;
    text-align: center;
   line-height: 44px;
}
.h_right {
    position: absolute;
    top: 12px;
    right: 18px;
    color: #595959;
}
.phone_register {
   padding-top: 9px;
   padding-bottom: 16px;
   overflow: hidden;
}
.phone_register a {
   border: 1px solid #fe6c6c;
   text-align: center;
   width: 50%;
   height: 30px;
   line-height: 30px;
   box-sizing: border-box;
   color: #333;
}
.phone_register a:nth-child(1) {
    float: left;
}
.phone_register a:nth-child(2) {
  float: left;
}
.active {
    background-color: #fe6c6c; 
}
.active span {
   color: #fff;
}
.txtphone {
   width: 100%;
   height: 40px;
   outline: 0;
   padding-left: 10px;
   background-color: #F9F9F9;
   border: none;
   border: 1px solid #e2e2e2;
}
.txtmessage_fa {
  position: relative;
}
.txtmessage {
  width: 100%;
  height: 40px;
  outline: 0;
  margin-top: 28px;
  padding-left: 10px;
  background-color: #F9F9F9;
  border: none;
  border: 1px solid #e2e2e2;
}
.txtmessage_fa span{
  position: absolute;
  right: 3px;
  top: 30px;
  border-left: 1px solid #e2e2e2;
  padding-left: 5px;
}
.txtmessage_fa span img {
  width: 79px;
  height: 36px;
}

.message {
 margin-top: 26px;
}
.message input {
  width: 48%;
  height: 40px;
  background-color: #F9F9F9;
  border: none;
  border: 1px solid #e2e2e2;
  padding-left: 10px;
}
.message a {
  width: 48%;
  height: 40px;
  float: right;
  text-align: center;
  line-height: 40px;
  color:#f60;
  border: 1px solid #f60;
}
.btn {
    background: #f60;
    width: 100%;
    margin-top: 24px;
    color: #fff;
}
.findpwd {
   margin-top: 24px;
}
.pwd {
  color: #666;
}
.pwd  {
    text-decoration: underline;
}
.content {
    padding: 0 8px;
}
/*邮箱注册 */ 
.txtemail {
   width: 100%;
   height: 40px;
   outline: 0;
   padding-left: 10px;
   background-color: #F9F9F9;
   border: none;
   border: 1px solid #e2e2e2;
   margin-top: 27px;
}
.txtpwd1 {
   width: 100%;
   height: 40px;
   outline: 0;
   padding-left: 10px;
   background-color: #F9F9F9;
   border: none;
   border: 1px solid #e2e2e2;
   margin-top: 27px;
}
/* 首页，分类，购物车 */
.nav {
  padding-top: 6px;
  width: 100%;
  background-color: #fff;
  border-bottom: 1px solid #E4E4E4;
}
.f_ul {
  overflow: hidden;
  margin-bottom: 3px;
}
.f_ul li {
  float: left;
  width: 25%;
}
.f_ul li a {
  text-align: center;
  display: block;
}
.f_ul li a img {
  width: 20px;
  height: 20px;
}
.f_ul li a p {
 margin-top: 3px;
 font-size: 12px;
 color: #494949;
 margin-bottom: 0;
}
.f_ul li a .f_active {
  color: #fe6600;
}
.numfather {
  position: relative;
}
.num {
  position: absolute;
  top: 0;
  right: 28%;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background-color: #FF6600;
  color: #fff;
  line-height: 13px;
  font-size: 12px;
}
</style>

